<template>
	<view class="z-item">
		<view class="z-item-top">
			<view class="z-item-label" :class="must&&'must'">
				<text style="white-space: nowrap;" :style="sign&&{color:'#1989fa'}">{{name}}</text>
				<slot name="name"></slot>
			</view>
			<slot></slot>
		</view>
		<view class="z-item-bottom" v-if="ex">
			<slot name="ex"></slot>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	const state = reactive({})

	const props = defineProps({
		name: {
			type: String
		},
		ex: {
			type: Boolean,
			default: () => false
		},
		must: {
			type: Boolean,
			default: () => false
		},
		sign: {
			type: Boolean,
			default: () => false
		}
	})
</script>

<style lang="scss" scoped>
	.z-item {
		/* display: flex; */
		/* align-items: center; */
		/* justify-content: space-between; */
		/* min-height: 100rpx; */
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e9e9ea;

		.z-item-top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			min-height: 80rpx;

			.z-item-label {
				white-space: nowrap;
			}

		}

		.z-item-bottom {
			border-top: 1rpx dashed #e9e9ea;
			// min-height: 100rpx;
		}
	}
</style>